<template>
  <div class="appSelect">
    <el-dialog :visible.sync="model.visable" title="选择应用" :close-on-click-modal="false" :show-close="false">
      <div class="dialog-body">
        <div class="srh-row">
          <search-input placeholder="应用名称" @search="searchChange" />
        </div>
        
        <div class="app-header">
          <div class="tab-btns">
            <div
              v-for="(item, i) in list"
              :key="item.group_id"
              class="tab-btn"
              @click="tabChange(item, i)"
              :class="{active: active === i}"
            >
              {{ item.group_name }}
            </div>
          </div>
        </div>
        <div class="app-list">
          <el-scrollbar class="scroll-bar">
            <el-row>
              <el-col
                v-for="(item, i) in appList"
                :key="i"
                class="media-box app-box"
                :class="{
                  active: item.checked
                }"
              >
                <img
                  v-show="item.checked"
                  src="~assets/img/tick.png"
                  class="tick"
                />
                <div class="media-con app-con" @click="doSelect(item, i)">
                  <div class="media-pic app-pic">
                    <img :src="item.app_icon" />
                  </div>
                  <el-tooltip
                    effect="dark"
                    :content="item.app_name"
                    placement="left"
                  >
                    <div class="media-name">
                      {{ item.app_name }}
                    </div>
                  </el-tooltip>
                  <div class="media-row dia-row">
                    <div class="key">上传人</div>
                    <el-tooltip
                      effect="dark"
                      :content="item.user"
                      placement="left"
                    >
                      <div class="val">
                        {{ item.user }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div class="media-row dia-row">
                    <div class="key">备注</div>
                    <el-tooltip
                      effect="dark"
                      :content="item.remark"
                      placement="left"
                    >
                      <div class="val">
                        {{ item.remark }}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api'

export default {
  props: {
    apps: {
      type: Array,
      default: []
    },
  },
  data(){
    return {
      search: '',
      list: [],
      appList: [],
      active : 0,
      model:{
        visable: true
      }
    }
  },
  watch:{
  },
  computed: {
    selectedList() {
      let checks = []
      this.list.forEach(item => {
        item.group.forEach(g => {
          if (g.checked) {
            checks.push(g)
          }
        })
      })
      return checks
    }
  },
  methods: {
    tabChange(item, i) {
      this.active = i;
      if (this.search) {
        this.appList = this.list[i].group.filter(item => {
          if (item.app_name.includes(this.search)) {
            return item
          }
        })
      } else {
        this.appList = item.group
      }
    },

    searchChange(e) {
      this.search = e
      let i = this.active
      if (e) {
        this.appList = this.list[i].group.filter(item => {
          if (item.app_name.includes(e)) {
            return item
          }
        })
      } else {
        this.appList = this.list[i].group
      }
    },

    doSelect(child, i) {
      child.checked = !child.checked;
      this.$set(this.appList, i, child);
      
    },

    cancel() {
      this.$emit('cancel')
    },

    sure() {
      this.$emit('sure', this.selectedList)
    },

    
    async chooseList() {
      const { code, data } = await api.license(this).chooseAPPList();
      if (code == 0) {
        this.list = data.map((item) => {
          item.group.forEach((g) => {
            g.checked = this.apps.includes(g.app_id);
          });
          return item;
        });
        this.appList = this.list[0].group;
      }
    },
  },
  created(){
    this.chooseList()
  }
}
</script>

<style lang="stylus">

</style>